<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .item {
            display: inline-block;
            border: 1px solid black;
            background-color: #999;
            list-style: none;
            padding-left: 0;
        }
        .item .m {
            width: 50px;
        }
    </style>
    <script src="../template.js"></script>
    <script src="../day02/jquery-1.9.0.js"></script>
    <title>jsonp</title>
    <!-- <script src="http://192.168.19.8/ajax/day03/doJsonp.php" ></script> -->
    <script>
        // 通过 live server 访问此页面
        function doLoadJsonp(){
            let sc = document.createElement("script");
            // php 访问url
            sc.src = "http://192.168.19.8/ajax/day03/doJsonp.php?callback=abc";
            console.log(sc);
            document.querySelector("head").appendChild(sc);
            sc.remove();// 清除标签
            // 假设需要1s请求就结束了
            // setTimeout(()=>{
            //     console.log('obj:', obj);
            // }, 1000);
        }
        function abc(data) {
            console.log('data:', data);
        }
        
        // var url = "https://wis.qq.com/weather/common?source=pc&weather_type=observe|forecast_1h|forecast_24h|index|alarm|limit|tips|rise&province=江苏省&city=南京市&county=&callback=";
        // 夜晚 天气图片地址 
        // https://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/currentweather/night/??.png
        // 白天 天气图片地址
        // https://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/currentweather/day/??.png

        function loadWeather() {
            var url = "https://wis.qq.com/weather/common?source=pc&weather_type=observe|forecast_1h|forecast_24h|index|alarm|limit|tips|rise&province=江苏省&city=南京市&county=&callback=";
            let sc = document.createElement("script");
            sc.src = url + "showWeatherData";
            document.querySelector("head").appendChild(sc);
            sc.remove();// 清除标签
        }
        function showWeatherData(result) {
            // console.log('result:', result);
            console.log(result.data);
            let html = template("t1", result.data);
            document.getElementById("showDiv").innerHTML = html;
        }

        function loadMyData() {
            $.ajax({
                url: 'https://wis.qq.com/weather/common',
                type: 'get',
                data: 'source=pc&weather_type=observe|forecast_1h|forecast_24h|index|alarm|limit|tips|rise&province=江苏省&city=南京市&county=',
                dataType: 'jsonp',
                // 自定义 callback 的名称(参数名)
                jsonp: "callback", // 默认是 callback
                jsonpCallback: "showMyData" // 回调函数名称, 默认是jquery随机生成的字符串
            }).done((result)=>{
                console.log('result:', result);
            });
        }
        function showMyData(result) {
            console.log('showMyData:', result);
        }

    </script>
</head>
<body>
    <button onclick="doLoadJsonp()" >jsonp</button>
    <hr>
    <button onclick="loadWeather()" >loadWeather</button>
    <hr>
    <button onclick="loadMyData()" >loadMyData</button>
    <hr>
    <div id="showDiv">
    </div>
    <script id="t1" type="text/html" >
        {{each forecast_24h day}}
        <ul class="item" >
            <li>时间:{{day.time}}</li>
            <li>
                白天天气:{{day.day_weather}}
                <img class="m" src="https://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/currentweather/day/{{day.day_weather_code}}.png" alt="">
            </li>
            <li>白天风向:{{day.day_wind_direction}}</li>
            <li>最高温度:{{day.max_degree}}</li>
            <li>最低温度:{{day.min_degree}}</li>
            <li>
                夜晚天气:{{day.night_weather}}
                <img class="m" src="https://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/currentweather/night/{{day.night_weather_code}}.png" alt="">
            </li>
            <li>夜晚风向:{{day.night_wind_direction}}</li>
        </ul>
        {{/each}}
    </script>
</body>
</html>